<template>
	<u-modal
		v-model:show="props.show"
		:title="props.title"
		:content="props.content"
		:width="width"
		:show-cancel-button="false"
		:show-confirm-button="false"
		:cancel-text="props.cancelText"
		:confirm-text="props.confirmText"
		cancelColor="#007AFF"
		confirmColor="#007AFF"
		:title-style="{
			fontWeight: '400',
			fontSize: '32rpx',
			color: '#000000',
			lineHeight: '48rpx'
		}"
		contentTextAlign="center"
	>
		<slot>
			<view class="contentClass">
				{{ props.content }}
			</view>
		</slot>
		<template #confirmButton>
			<view class="btnBox">
				<view class="btn_item" v-if="showCancelBtn" @click="cancel">取消</view>
				<view class="btn_item confirm_btn" v-if="showConfirmBtn" @click="confirm">
					确定
				</view>
			</view>
		</template>
	</u-modal>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
const props = defineProps({
	show: {
		type: Boolean,
		required: true,
		default: false
	},
	width: {
		type: String,
		default: '540rpx'
	},
	title: {
		type: String,
		default: ''
	},
	content: {
		type: String,
		default: ''
	},
	confirmText: {
		type: String,
		default: '确认'
	},
	cancelText: {
		type: String,
		default: '取消'
	},
	showCancelBtn: {
		type: Boolean,
		default: true
	},
	showConfirmBtn: {
		type: Boolean,
		default: true
	}
});
const emits = defineEmits(['update:show', 'cancel', 'confirm']);
const showModel = ref(props.show);

//微信小程序上支持类型穿透
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

const cancel = () => {
	emits('update:show', false);
	emits('cancel');
};

const confirm = () => {
	emits('confirm');
};
</script>

<style lang="scss">
::v-deep .u-modal__title {
	padding: 48rpx 0 20rpx !important;
}

::v-deep .u-modal__content {
	padding: 0 !important;
}

::v-deep .u-modal__content__text {
	font-weight: 400 !important;
	font-size: 26rpx !important;
	color: #595959 !important;
	line-height: 39rpx !important;
	padding: 0 32rpx 32rpx;
}

.btnBox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40rpx;

	.btn_item {
		width: 210rpx;
		height: 80rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #8e775b;
		font-weight: 400;
		font-size: 28rpx;
		color: #8e775b;
		line-height: 80rpx;
		text-align: center;
	}

	.confirm_btn {
		background-color: #8e775b;
		color: #fff;
	}
}

.contentClass {
	font-weight: 400;
	font-size: 26rpx;
	color: #333333;
	line-height: 40rpx;
	padding:0 32rpx 20rpx;
	text-align: center;
}
</style>
